import React, { FC, useState } from 'react'
import styles from './common.module.scss'
import { Typography, Empty, Table, Tag, Button, Space, Modal, Spin, message } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons'
import ListSearch from '../../components/ListSearch'
import ListPage from '../../components/ListPage'
import useLoadQuestionListData from '../../hooks/useLoadQuestionListData'
import { useRequest } from 'ahooks'
import { deleteQuestionsService, updateQuestionService } from '../../services/question'


const { Title } = Typography
const { confirm } = Modal



const tableColums = [
  {
    title: '标题',
    dataIndex: 'title',
  },
  {
    title: '是否发布',
    dataIndex: 'isPublished',
    render: (isPublished: boolean) => {
      return isPublished ? <Tag color='processing'>已发布</Tag> : <Tag>未发布</Tag>
    }
  },
  {
    title: '答卷',
    dataIndex: 'answerCount',
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
  }
]



const Star: FC = () => {

  const { data = {}, loading, refresh } = useLoadQuestionListData({ isDeleted: true })
  const { list = [], total = 0 } = data


  // 记录选中的 id
  const [selectedIds, setSelectedIds] = useState<string[]>([])

  // 恢复

  const { run: recover } = useRequest(async () => {
    for await (const id of selectedIds) {
      await updateQuestionService(id, { isDeleted: false })
    }
  }, {
    manual: true,
    debounceWait: 500,
    onSuccess() {
      message.success('恢复成功')
      refresh() // 手动刷新列表
      setSelectedIds([])
    }
  }
  )

  // 删除

  const { run: deleteQuestion } = useRequest(async () => {
    await deleteQuestionsService(selectedIds)
  }, {
    manual: true,
    onSuccess() {
      message.success('删除成功')
      refresh()
      setSelectedIds([])
    },
  })

  const del = () => {
    confirm({
      title: '确认彻底删除该问卷',
      icon: <ExclamationCircleOutlined />,
      content: '删除以后不可找回',
      onOk: deleteQuestion,
      cancelText: '取消',
      okText: '确认'
    })
  }

  const TabelElem =
    <>
      <div style={{ marginBottom: '16px' }}>
        <Space>
          <Button type='primary' disabled={selectedIds.length === 0} onClick={recover} >恢复</Button>
          <Button danger disabled={selectedIds.length === 0} onClick={del}>删除</Button>

        </Space>
      </div>

      <Table dataSource={list} columns={tableColums} pagination={false} rowKey="_id"
        rowSelection={{
          type: 'checkbox',
          onChange: (selectedRowKeys) => {
            setSelectedIds(selectedRowKeys as string[])
          }
        }}
      ></Table>
    </>

  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>回收站</Title>
        </div>
        <div className={styles.right}>
          <ListSearch />
        </div>
      </div>

      <div className={styles.content}>
        {loading && (
          <div style={{ textAlign: 'center' }}>
            <Spin />
          </div>
        )}
        {!loading && list.length === 0 && <Empty description="暂无数据" />}
        {list.length > 0 && TabelElem}
      </div>

      <div className={styles.footer}>
        <ListPage total={total}></ListPage>
      </div>
    </>
  )
}

export default Star